<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家族传承应用原型</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>
<body class="bg-yellow-50">
  <header class="bg-red-500 text-white py-4 px-6 fixed top-0 w-full shadow-md z-10">
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-bold">家族传承</h1>
      <nav class="space-x-6">
        <a href="#home" class="hover:underline">首页</a>
        <a href="#profile" class="hover:underline">个人信息</a>
        <a href="#settings" class="hover:underline">隐私设置</a>
      </nav>
    </div>
  </header>
  <main class="pt-24 grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
    <section id="home" class="border rounded-lg overflow-hidden">
      <iframe src="home.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="generation" class="border rounded-lg overflow-hidden">
      <iframe src="generation.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="tree" class="border rounded-lg overflow-hidden">
      <iframe src="tree.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="social" class="border rounded-lg overflow-hidden">
      <iframe src="social.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="feature" class="border rounded-lg overflow-hidden">
      <iframe src="feature.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="profile" class="border rounded-lg overflow-hidden">
      <iframe src="profile.html" class="w-full h-screen border-0"></iframe>
    </section>
    <section id="settings" class="border rounded-lg overflow-hidden">
      <iframe src="settings.html" class="w-full h-screen border-0"></iframe>
    </section>
  </main>
</body>
</html>